<table id="dg"></table>
<div id="tb" style="padding:5px;height:auto">
    <div style="margin-bottom:5px">
        <a href="javascript:;" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
        <a href="javascript:;" class="easyui-linkbutton" iconCls="icon-edit" plain="true">编辑</a>
        <a href="javascript:;" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
    </div>
    <div>
        <input type="text" data-options="iconCls:'icon-date'" id="dateRange">
        Language:
        <select class="easyui-combobox" panelHeight="auto" style="width:100px">
            <option value="java">Java</option>
            <option value="c">C</option>
            <option value="basic">Basic</option>
            <option value="perl">Perl</option>
            <option value="python">Python</option>
        </select>
        <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $('#dg').datagrid({
            idField:'id',
            fitColumns: true,
            pagination: true,
            singleSelect: true,
            pageSize: 15,
            pageList: [15,30,45,60],
            url:'/sys/staff/list',
            columns:[[
                {field:'id',title:'ID',width:80,align:'center'},
                {field:'uname',title:'登录名',width:100,align:'center'},
                {field:'nickname',title:'昵称',width:100,align:'center'},
                {field:'email',title:'邮箱',align:'center'},
                {field:'mobile',title:'手机',width:120,align:'center',
                    formatter: function(value,row,index){
                        return JA.mobileDst(value);
                    }
                },
                {field:'orgId',title:'机构',width:100,align:'center'},
                {field:'status',title:'状态',width:100,align:'center',
                    formatter: function(value,row,index){
                        if (value==0){
                            return '正常';
                        }else if(value==1) {
                            return '锁定'
                        }else{
                            return '--'
                        }
                    },
                    styler: function(value,row,index){
                        if (value == 1){
                            return 'color:red;';
                        }
                    }
                },
                {field:'ctime',title:'时间',width:160,align:'center',
                    formatter: function(value,row,index){
                        return JA.msToDate(value);
                    }
                }
            ]],
            onClickRow: function () {
                $('#dg').datagrid('clearSelections');
            },
            rowStyler: function(index,row){
                if (row.status==1){
                    return 'background-color: #efefef;';
                }
            },
            toolbar: '#tb'
        });

        $("#dateRange").daterangepicker({
            direction: 'ltr',
            format: 'YYYY-MM-DD HH:mm:ss',
            separator: ' - ',
            applyLabel: 'Apply',
            cancelLabel: 'Cancel',
            fromLabel: 'From',
            toLabel: 'To',
            customRangeLabel: 'Custom',
            daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            firstDay: 1
        }, function(start, end, label) {
        });
    });
</script>